<template>
	<div class="playing" v-infinite-scroll="loadMore" infinite-scroll-distance="10" infinite-scroll-disabled="loading">
		<ul>
    	<li v-for="movies in movieList"  @click="toMovie(movies.id)" class="clearfix">
    		<div class="movie_img"><img v-lazy="picFix(movies.img)" /></div>
    		<div class="movie_zhong">
    			<div class="movie_title">
						<span>{{movies.nm}}</span>
    				<span v-if="movies.version.charAt(1)==3 &&movies.version.length !=3" class="verson"><img src="../../../../image/下载.png"/></span>  				
    				<span v-else-if="movies.version.charAt(1)==2" class="verson"><img src="../../../../image/下载 (1).png"/></span>
    				<span v-else-if="movies.version==''"></span>
    				<span v-else="" class="verson_3d"><img  src="../../../../image/下载 (3).png"/></span>
    				<span v-if="movies.preShow==true" class="preShow"><img src="../../../../image/下载 (2).png"/></span>
    				<span></span>
    			</div>
    			<div class="movie_word" v-if="movies.sc==0"><span class="org">{{movies.wish}}</span >人想看</div>
    			<div class="movie_word" v-else="">观众评<span class="org">{{movies.sc.toFixed(1)}}</span></div>
    			<div class="movie_word" v-if="movies.star==null"></div>
    			<div v-else="" class="movie_word">主演:{{movies.star}}</div>
    			<div class="movie_word">{{movies.showInfo}}</div>  			
    			<button v-if="movies.globalReleased==false" class="pre">预售</button>   			
    			<button class="button_mai" v-else>购票</button>
    			
    		</div>
    		<hr />
    	</li>
    </ul>
		 <div class="more" v-if="movieList.length>=17?false:true">
                <mt-spinner type="snake"
                 color="red"></mt-spinner> 努力加载中...
      </div>

	</div>
</template>

<script>
	export default {
  name: 'home',
  created(){
  	console.log(this.axios)
  	
  	//请求  -->本地服务器 (webpack的devServer) -->猫眼的服务器
  	//   /maoyan/maoyan/ajax/movieOnInfoList    -->     ajax/movieOnInfoList 
  	this.axios.get('/maoyan/ajax/movieOnInfoList').then((res)=>{
  		console.log("正在热映",res)
  		
			this.movieList= res.data.movieList
			// 把后6个电影id用slice截取出来
			this.movieIds=res.data.movieIds.slice(12,18)
		
  	})
  	this.$store.commit('changeHT','猪猪电影')
	},
	// http://maoyan.bluej.cn/maoyan/ajax/moreComingList?token=&movieIds=1250341
  data(){
  	return {
  		movieList:[],
			movieIds:[],
			loading:false
  	}
  },
  methods:{
        //修改图片尺寸
        picFix(url){
        	  return url.replace('w.h','64.90')
				},
				// 点击所选电影跳转到相应路由
        toMovie(id){
					this.$router.push({name:"movie",params:{movieId:id}})				
				},
				// 到底加载
				loadMore(){		
					// 若电影列表长度等于12时循环请求后6个电影，然后分别push到原来的电影列表上
				console.log(this.loading)
						if (this.movieList.length==12&&this.loading==false) {
						
							this.loading=true
				 this.axios.get("/maoyan/ajax/moreComingList",{
					 params:{
						 token:'',
						 movieIds:this.movieIds.toString()					//转为字符串
					 }
				 }).then((res)=>{				
					 this.movieList= this.movieList.concat(res.data.coming)           //拼接字符串
				 		this.loading=false
				 })
				 
				}
				}
//toAbout(){
  	
  	//路由对象的方法，push就是跳转
  	//queery 查询字符串的参数 /about?id=4396&name=777
//	this.$router.push({path:'/about',
//		query:{
//			id:4396
//		}
//	})
    //跳转到命名路由     传参使用params
//	this.$router.push({name:'about',
//		  params:{
//		  	id:4396
//		  }
//	})
//	
//},
//tomy(){
//	this.$router.push({
//		name:'my',
//		params:{
//			userId:1234
//		}
//	})
//}
  },
 }
</script>

<style>
</style>